<template>
  <div>
    <QueryForm
      v-if="activeName == '0'"
      v-model="filters"
      :query-form-config="historyFormConfig"
      @handleQuery="search"
      @clear="clearList"
    />
    <QueryForm
      v-if="activeName == '1'"
      v-model="filters"
      :query-form-config="historyFormConfigb"
      @handleQuery="search"
      @clear="clearList"
    />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(em, dex) in tabList"
        :key="dex"
        :name="em.index"
        :label="em.name"
      >
        <el-table
          v-if="activeName == '0'"
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table doumee-element-tableb"
        >
          <el-table-column
            align="center"
            :label="$t('message.yhxx')"
            prop="userInfo"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.ttlx')"
            min-width="130"
            prop="type"
          >
            <template slot-scope="scope">
              {{
                scope.row.type == 0
                  ? $t("message.qydw")
                  : scope.row.type == 1
                  ? $t("message.grfqydw")
                  : ""
              }}
            </template></el-table-column
          >
          <el-table-column
            align="center"
            :label="$t('message.fptt')"
            min-width="350"
            prop="companyTitle"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.companyTitle }}
              {{ scope.row.companyTax ? "-" + scope.row.companyTax : "" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.dzyx')"
            prop="email"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            align="center"
            :label="$t('message.ddsl')"
            show-overflow-tooltip
            prop="orderNum"
            min-width="100"
          >
            <template slot-scope="scope">
              <span class="ckxqBtn" @click="orderBtn(scope.row)">
                {{ scope.row.orderNum }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.kkpje')"
            prop="amot"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.spr')"
            show-overflow-tooltip
            prop="editor"
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.spsj')"
            prop="editTime"
            min-width="160"
          />
          <el-table-column
            align="center"
            :label="$t('message.bz')"
            show-overflow-tooltip
            prop="editInfo"
            min-width="200"
          />
          <el-table-column
            align="center"
            :label="$t('message.status')"
            min-width="120"
            fixed="right"
            prop="editStatus"
          >
            <template slot-scope="scope">
              {{
                scope.row.editStatus == 1
                  ? $t("message.sptg")
                  : scope.row.editStatus == 2
                  ? $t("message.spjj")
                  : scope.row.editStatus == 3
                  ? $t("message.wxsp")
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.sqsj')"
            prop="createTime"
            min-width="160"
          />
          <el-table-column
            :label="$t('message.caozuo')"
            width="100"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  meta.indexOf('MakeInvoiceApply') > -1 &&
                  scope.row.editStatus == 0
                "
                class="flex-cc"
              >
                <el-button
                  v-preventReClick
                  type="text"
                  @click="spBtn(scope.row)"
                  >{{ $t("message.shipi") }}</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="activeName == '0'">
          <Paginations
            :total="total"
            :page="pagination.page"
            @current-change="getListb"
            @SizeChange="pageSizeChange2"
          />
        </div>
        <el-table
          v-if="activeName == '1'"
          ref="tableb"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-tableb"
        >
          <el-table-column
            align="center"
            :label="$t('message.kpsj')"
            prop="createTime"
            min-width="160"
          />
          <el-table-column
            align="center"
            :label="$t('message.ttlx')"
            min-width="150"
            prop="type"
          >
            <template slot-scope="scope">
              {{
                scope.row.type == 0
                  ? $t("message.qydw")
                  : scope.row.type == 1
                  ? $t("message.grfqydw")
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.fptt')"
            min-width="350"
            prop="companyTitle"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.companyTitle }}
              {{ scope.row.companyTax ? "-" + scope.row.companyTax : "" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.fpje')"
            prop="amot"
            show-overflow-tooltip
            min-width="100"
          />
          <el-table-column
            align="center"
            :label="$t('message.dzyx')"
            prop="email"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            align="center"
            :label="$t('message.yhxx')"
            prop="userInfo"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.ddsl')"
            show-overflow-tooltip
            prop="orderNum"
            min-width="100"
          >
            <template slot-scope="scope">
              <span class="ckxqBtn" @click="orderBtnb(scope.row)">
                {{ scope.row.orderNum }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.kpr')"
            prop="creator"
            show-overflow-tooltip
            min-width="120"
          />
          <el-table-column
            align="center"
            :label="$t('message.status')"
            prop="isRed"
            fixed="right"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.isRed == 1 ? $t("message.yhc") : $t("message.zc") }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.sqsj')"
            prop="applyTime"
            min-width="160"
          />
          <el-table-column
            :label="$t('message.caozuo')"
            width="230"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button
                  v-if="
                    scope.row.blueState == 2 &&
                    (scope.row.redState == 0 || scope.row.redState == null)
                  "
                  v-preventReClick
                  type="text"
                  @click="hcBtn(scope.row)"
                  >{{ $t("message.hc") }}</el-button
                >
                <el-button
                  v-if="scope.row.blueState == 2 || scope.row.redState == 2"
                  v-preventReClick
                  type="text"
                  @click="againBtn(scope.row)"
                  >{{ $t("message.cf") }}</el-button
                >
                <el-button
                  v-if="scope.row.redQrPath"
                  v-preventReClick
                  type="text"
                  @click="openHlp(scope.row.redQrPath)"
                  >{{ $t("message.ckhp") }}</el-button
                >
                <el-button
                  v-if="scope.row.qrPath"
                  v-preventReClickcklp
                  type="text"
                  @click="openHlp(scope.row.qrPath)"
                  >{{ $t("message.cklp") }}</el-button
                >
                <!-- <el-button
                  v-preventReClick
                  type="text"
                  @click="downloadBtn(scope.row.id)"
                  >{{ $t("message.xz") }}</el-button
                > -->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="activeName == '1'">
          <Paginations
            :total="total"
            :page="pagination.page"
            @current-change="getList"
            @SizeChange="pageSizeChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="$t('message.shipi')"
      :visible.sync="visible"
      width="500px"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-suffix="："
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item :label="$t('message.spzt')" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="1">{{ $t("message.tg") }}</el-radio>
            <el-radio label="2">{{ $t("message.jj") }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('message.spyj')" prop="editInfo">
          <el-input
            v-model="ruleForm.editInfo"
            :autosize="{ minRows: 2, maxRows: 4 }"
            maxlength="200"
            type="textarea"
            :placeholder="$t('message.qsr') + $t('message.spyj')"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t("message.qx") }}</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="submitForm('ruleForm')"
          >{{ $t("message.qr") }}</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :title="$t('message.ddxq')"
      top="20vh !important"
      :visible.sync="showInvoiceOrder"
      width="500px"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-table
        :data="invoiceOrderList"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          :label="$t('message.ddlx')"
          prop="orderType"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.ddbh')"
          prop="orderId"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.kpje')"
          width="100"
          prop="invoiceMoney"
          show-overflow-tooltip
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";
import store from "@/store";
import { historyFormConfig } from "./config.js";
import { historyFormConfigb } from "./configs.js";
import QueryForm from "@/components/QueryForm";
import {
  listInvoiceRecord,
  orderTypeList,
  listInvoiceApply,
  makeInvoiceApply,
  redFlush,
  redFlushAgain,
  getRedFlush,
  getInvoiceOrderList,
} from "@/api";
export default {
  name: "InvoiceList",
  components: {
    QueryForm,
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      historyFormConfig,
      historyFormConfigb,
      meta: [],
      subLoading: false,
      ruleForm: {},
      spList: [
        { label: this.$t("message.sptg"), value: "1" },
        { label: this.$t("message.spjj"), value: "2" },
      ],
      visible: false,
      list: [],
      pagination: {
        page: 1,
        rows: 10,
      },
      total: 0,
      orderTypeList: [],
      typeList: [
        { value: "0", label: this.$t("message.qydw") },
        { value: "1", label: this.$t("message.grfqydw") },
      ],
      filters: {},
      listLoading: true,
      show: false,
      orderId: "",
      form: {},
      activeName: "1",
      tabList: [
        { index: "1", name: this.$t("message.ykp") },
        { index: "0", name: this.$t("message.kpsq") },
      ],
      invoiceOrderList: [],
      showInvoiceOrder: false,
      rules: {
        price: [
          {
            pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
            required: true,
            message: this.$t("message.qsrzrksdj"),
            trigger: "blur",
          },
        ],
        info: [
          {
            required: true,
            message: this.$t("message.fyyxxtk"),
            trigger: "blue",
          },
        ],
        status: [
          {
            required: true,
            message: this.$t("message.qxz") + this.$t("message.spzt"),
            trigger: "change",
          },
        ],
        editInfo: [
          {
            required: true,
            message: this.$t("message.qsr") + this.$t("message.spyj"),
            trigger: "blue",
          },
        ],
      },
      applyId: "",
    };
  },
  created() {
    this.meta = this.$route.meta.buttons || [];
    this.getList();
    // this.getOrderTypeList()
  },
  activated() {
    if (this.$route.query.renovate) {
      this.search();
    }
  },
  methods: {
    openHlp(e) {
      window.open(e, "_blank");
    },
    spBtn(e) {
      this.applyId = e.id;
      this.visible = true;
      this.ruleForm = {};
      this.$refs["ruleForm"].resetFields();
    },
    orderBtn(row) {
      if (row.invoiceOrderList && row.invoiceOrderList.length > 0) {
        this.invoiceOrderList = row.invoiceOrderList;
        this.showInvoiceOrder = true;
      }
    },
    orderBtnb(row) {
      if (!row.orderNum) {
        return false;
      }
      getInvoiceOrderList({
        param: {
          id: row.id,
        },
      }).then((res) => {
        if (res.errorCode === "000000") {
          if (res.recordList && res.recordList.length > 0) {
            this.invoiceOrderList = res.recordList;
            this.showInvoiceOrder = true;
          }
        }
      });
    },
    downloadBtn(id) {
      getRedFlush({
        param: {
          id,
        },
      }).then((res) => {
        if (res.errorCode === "000000") {
          if (res.record.tsPdfUrl) {
            window.open(res.record.tsPdfUrl);
          }
        }
      });
    },
    hcBtn(row) {
      const that = this;
      this.$confirm(this.$t("message.hccztc"), this.$t("message.ts"), {
        confirmButtonText: this.$t("message.qd"),
        cancelButtonText: this.$t("message.qx"),
        type: "warning",
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== "confirm") {
            close();
            return;
          }
          ctx.confirmButtonLoading = true;
          redFlush({ param: { id: row.id, email: row.email } })
            .then((res) => {
              ctx.confirmButtonLoading = false;
              close();
              if (res.errorCode === "000000") {
                that.$message.success(this.$t("message.hccg"));
                that.getList(1);
              }
            })
            .catch(() => {
              ctx.confirmButtonLoading = false;
            });
        },
      }).finally(() => {});
    },
    againBtn(row) {
      const that = this;
      this.$confirm(this.$t("message.czfctc"), this.$t("message.ts"), {
        confirmButtonText: this.$t("message.qd"),
        cancelButtonText: this.$t("message.qx"),
        type: "warning",
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== "confirm") {
            close();
            return;
          }
          ctx.confirmButtonLoading = true;
          redFlushAgain({ param: { id: row.id, email: row.email } })
            .then((res) => {
              ctx.confirmButtonLoading = false;
              close();
              if (res.errorCode === "000000") {
                that.$message.success(this.$t("message.fscg"));
                that.getList(1);
              }
            })
            .catch(() => {
              ctx.confirmButtonLoading = false;
            });
        },
      }).finally(() => {});
    },
    submitForm(formName) {
      const that = this;
      const param = this.ruleForm;
      param.applyId = this.applyId;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.visible = false;
          that.subLoading = true;
          makeInvoiceApply({ param })
            .then((res) => {
              that.subLoading = false;
              if (res.errorCode === "000000") {
                that.$message.success(this.$t("message.spcg"));
                that.getListb(1);
              }
            })
            .catch(() => {
              that.subLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClick(tab, event) {
      this.pagination = {
        page: 1,
        rows: 10,
      };
      if (this.activeName === "0") {
        this.getListb(1);
      } else {
        this.getList(1);
      }
      // this.getSubjectBaiList()
    },
    // 获取订单类型列表
    getOrderTypeList() {
      orderTypeList({ param: { type: "ORDER_TYPE_INVOICE_OPEN" } }).then(
        (res) => {
          if (res.errorCode !== "000000") return;
          // this.orderTypeList = res.recordList
          this.historyFormConfig.formItems[3].options = res.recordList.map(
            (i) => {
              i.value = i.id;
              i.value = i.name;
              return i;
            }
          );
        }
      );
    },
    orderTypeName(b) {
      const arr = this.orderTypeList;
      let c = "";
      arr.forEach((e) => {
        if (e.id === b) {
          c = e.name;
        }
      });
      return c;
    },
    getListb(page) {
      this.listLoading = true;
      const { filters, pagination } = this;
      const venueId = sessionStorage.getItem("venueId");
      if (page) {
        pagination.page = page;
        this.pagination.page = page;
      }
      if (pagination.page === 1) {
        pagination.firstQueryTime = parseTime(new Date());
      }
      listInvoiceApply({ pagination, param: { venueId, ...filters } })
        .then((res) => {
          this.listLoading = false;
          if (res.errorCode === "000000") {
            this.list = res.recordList;
            this.total = res.totalCount;
            this.$refs.table.doLayout();
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    clearList() {
      this.filters = {};
      if (this.activeName === "0") {
        this.getListb(1);
      } else {
        this.getList(1);
      }
    },
    search() {
      if (this.activeName === "0") {
        this.getListb(1);
      } else {
        this.getList(1);
      }
    },
    getList(page) {
      this.listLoading = true;
      const { filters, pagination } = this;
      const venueId = sessionStorage.getItem("venueId");
      if (page) {
        pagination.page = page;
        this.pagination.page = page;
      }
      if (pagination.page === 1) {
        pagination.firstQueryTime = parseTime(new Date());
      }
      listInvoiceRecord({ pagination, param: { venueId, ...filters } })
        .then((res) => {
          this.listLoading = false;
          if (res.errorCode !== "000000") return;
          this.list = res.recordList;
          this.total = res.totalCount;
          this.$refs.tableb.doLayout();
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    pageSizeChange(val) {
      this.pagination.rows = val;
      this.getList();
    },
    pageSizeChange2(val) {
      this.pagination.rows = val;
      this.getListb();
    },
  },
};
</script>

